
<form class="form-horizontal well">
    <fieldset>
        <legend>Registrar Nivel</legend>
        <div id="mensajeControl" style="display: none">
            <button type="button" class="close" data-dismiss="alert">×</button>
        </div>
      
        <div class="row-fluid">
            <div class="control-group">
                <label class="control-label">Nombre Nivel</label>
                <div class="controls"><input type="text" class="input-large" id="nombreNivel" ></div>
            </div>
            <div class="control-group">
                <label class="control-label">Descripción</label>
                <div class="controls"><textarea class="input-xxlarge" id="descripcionNivel" rows="3"></textarea></div>
            </div>
            
            <h5>Escala de Medición</h5>
            
            <div class="span8 offset2">
              <div class="control-group">
            <table class="table-striped"  id="tablaEscalas">
                                <thead class="titulo-tabla">
                                    <tr>
                                        <td class="control-label"><b>Valor Escala </b></td>
                                        <td class="control-label" ><b>Calificación</b></td>
                                      
                                       
                                    </tr>
                                  
                                 
                                </thead>
                                <tbody class="cuerpo-tabla" id="tablaEscala">
                                
                                <!--Contenido Tabla Acuerdos-->
                                    <tr id="my_row_101">
                                        <td><input name="escala1" id="escala1" type="text" class="valorEscala"></td> <!--id 7 palabras  funciona y 1 num al final-->
                                         <td><input type="text" name="califi1" id="califi1" class="calificacion" ></td>
                     
                                           
                                  </tr>
                                </tbody>
                            </table>
            
            <span class="btn btn-info rigth">Agregar</span>
               </div>
        </div>
        </div>
        
         
            <div class="control-group">
                <a class="btn btn-primary" onclick="registrar_nivel_2();" >Registrar</a>
            </div>
            
        </div>

    </fieldset>
</form>

<script>
    
 $( document ).ready(function() {
     
        $("span").click(function(){
            
            addTableRow($("table"));
            
        });
    
/////agregar nueva fila//////////
function addTableRow(table)
{
    // clone the last row in the table
    var $tr = $(table).find("tbody tr:last").clone();
    // get the name attribute for the input and select fields
    $tr.find("input,select").attr("name", function()
    {
        // break the field name and it's number into two parts
        var parts = this.id.match(/(\D+)(\d+)$/);
        // create a unique name for the new field by incrementing
        // the number for the previous field by 1
        return parts[1] + ++parts[2];
        // repeat for id attributes
    }).attr("id", function() {
        var parts = this.id.match(/(\D+)(\d+)$/);
        maxId = parts[2];
        return parts[1] + ++parts[2];
    });
    // append the new row to the table
    $(table).find("tbody tr:last").after($tr);
}
 });
</script>